<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Extents - Gantt chart example</title>
    <link href="css/samples.css" rel="stylesheet" type="text/css">
    <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.extents.js"></script>
</head><body><div id="page-content">
    <h1>Extents - Gantt chart example</h1>

    <p>Corporative programming process:</p>

    <div id="placeholder" style="width:600px;height:300px;position:relative;"></div>

    <div class="cr_footer">Released under GPLv2, (C) 2012 Serge V. Izmaylov</div>
</div>
<script type="text/javascript">
$(function () {
    var d1 = {
                label: "% complete",
                data: [[0, 0], [2, 0], [3, 10], [4, 40], [5, 40], [6, 70], [7, 80], [8, 100], [11, 100]]
    };
    var d2 = {
        extents: { show: true, barVAlign: "bottom", rows: 4, rowHeight: 40, barVAlign: "bottom" },
        data: [],
        extentdata: [
            {label: 'fight laziness', start: 0, end: 2, row: 1},
            {label: 'write documentation', start: 2, end: 8, depends: [0], row: 0},
            {label: 'code program', start: 2, end: 4, depends: [0], row: 2},
            {label: 'test program', start: 4, end: 7, depends: [2], row: 1},
            {label: 'fix bugs', start: 5, end: 7, depends: [3], row: 3},
            {label: 'deploy', start: 7, end: 8, depends: [3, 4], row: 2},
            {label: 'WHERE IS MY BONUS?!', start: 8, end: 11, depends: [1, 5], row: 1}
        ]
    };

    $.plot($("#placeholder"), [ d1, d2 ], {
        xaxis: { min: 0, max: 11, tickFormatter: function (t) { return t.toString() + "wk"; }, ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] },
        yaxis: { min: -5, max: 120, tickFormatter: function (v) { return v.toString() + "%"; }, ticks: [0, 20, 40, 60, 80, 100] }
    });
});
</script></body></html>
